<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>AI+应用设计创新大赛</title>
    <!--====== Favicon Icon ======-->
    <link rel="shortcut icon" href="/images/favicon.png" type="image/png">

    <!--====== Bootstrap CSS ======-->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!--====== default CSS ======-->
    <link rel="stylesheet" href="/css/default.css">
    <!--====== Style CSS ======-->
    <link rel="stylesheet" href="/css/style.css">
    <!-- login css -->
    <link rel="stylesheet" href="/css/login.css">
    <style>
        label.error{
            color: red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="all" style="min-height: 780px;">
            <div class="row">
                <div class="log col-lg-6 col-xs-12">
                    <div class="register">
                        <form id="myForm">
                            <div class="register-top-grid" style="margin-bottom: 0px;">
                                <h4>用户注册</h4>
                                <div class="input">
                                    <span>手机号 <label style="color: red">* </label></span>
                                    <input type="text" id="phone" name="phone" placeholder="请输入手机号" class="input-text"/>
                                </div>
                                <div class="input">
                                    <span>姓名 <label style="color: red">* </label></span>
                                    <input type="text" id="name" name="name" placeholder="请输入姓名" class="input-text"/>
                                </div>
                                <div class="input">
                                    <span>邮箱 <label style="color: red">* </label></span>
                                    <input type="text" id="email" name="email" placeholder="请输入邮箱" class="input-text"/>
                                </div>
                                <div class="input">
                                    <span>参赛地区 <label style="color: red">* </label></span>
                                    <select id="area" name="area" class="input-text">
                                        <option value="">请选择</option>
                                        <option th:each="ar, arState : ${areas}" th:value="${ar.id}" th:text="${ar.name}"></option>
                                    </select>
                                </div>
                                <div class="input">
                                    <span>赛道 <label style="color: red">* </label></span>
                                    <select id="type" name="type" class="input-text">
                                        <option value="">请选择</option>
                                        <option value="1" >企业组</option>
                                        <option value="2" >高校组</option>
                                    </select>
                                </div>
                                <div class="input">
                                    <span>来源 <label style="color: red">* </label></span>
                                    <select id="source" name="source" class="input-text">
                                        <option value="">请选择</option>
                                        <option value="0" >好友推荐</option>
                                        <option value="1" >朋友圈</option>
                                        <option value="2" >抖音</option>
                                    </select>
                                </div>
                                <div class="input">
                                    <span>密码 <label style="color: red">*</label></span>
                                    <input type="password" id="password" name="password" placeholder="请输入密码" class="input-text" />
                                </div>
                                <div class="input">
                                    <span>密码确认 <label style="color: red">*</label></span>
                                    <input type="password" id="passwordCopy" name="passwordCopy" placeholder="请再次输入密码" class="input-text" />
                                </div>
                            </div>
                            <div class="text-center">
                                <input type="submit" value="提交" class="tijiao"/>
                                <a th:href="@{/uis/loginUI}"><input type="button" value="返回" class="tijiao"/></a>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="reg col-lg-6 col-xs-12">
                    <div class="reg_1">
                        <h2>探索未来，智启新程！</h2>
                        <p>欢迎参加AI+应用创新设计大赛，期待您的加入！</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/js/jquery-1.12.4.min.js"></script>
    <script src="/js/jquery-validate.js"></script>
    <script src="/js/sweetalert.min.js"></script>
    <script src="/js/common.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#myForm").validate({
                rules: {
                    phone: {
                        required: true,
                        minlength: 11
                    },
                    name: {
                        required: true
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    area: {
                        required: true
                    },
                    type: {
                        required: true
                    },
                    source: {
                        required: true
                    },
                    password: {
                        required: true,
                        minlength: 6
                    },
                    passwordCopy: {
                        equalTo : '#password'
                    }
                },
                messages: {
                    phone: {
                        required: "请输入手机号",
                        minlength: "手机号格式不正确"
                    },
                    name: {
                        required: "请输入姓名"
                    },
                    email: {
                        required: "请输入邮箱",
                        email: "邮箱格式不正确"
                    },
                    area: {
                        required: "请选择参赛地区"
                    },
                    type: {
                        required: "请选择赛道"
                    },
                    source: {
                        required: "请选择来源"
                    },
                    password: {
                        required: "请输入密码",
                        minlength: "密码不能少于6位"
                    },
                    passwordCopy: {
                        equalTo:'两次密码输入不一致'
                    }
                },
                submitHandler: function(form) {
                    const formData = {
                        phone: $('#phone').val(),
                        name: $('#name').val(),
                        email: $('#email').val(),
                        area: $('#area option:selected').val(),
                        type: $('#type').val(),
                        source: $('#source').val(),
                        password: $('#password').val()
                    };
                    $.ajax({
                        type: 'POST',
                        url: '/register',
                        data: formData,
                        dataType: 'json',
                        success: function(data) {
                            if(data.message!=null){
                                swal({
                                    text: data.message,
                                    icon: 'error'
                                });
                            }else{
                                swal({
                                    text: "注册成功！",
                                    icon: 'success'
                                });
                                setTimeout(function (){
                                    window.location.href = '/main';
                                }, 1500)
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            console.log('Error: ' + textStatus);
                        }
                    });
                }
            });
        })
    </script>
</body>
</html>
